<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="企业用户名：">
        <p>{{form.contact}}</p>
      </el-form-item>
      <el-form-item label="所属企业：">
        <p>{{form.companyname}}</p>
      </el-form-item>
      <el-form-item label="刷新时间：">
        <p v-if="form.refreshTime">{{form.refreshTime.slice(0,10)}} <el-button type="text" @click="handlerefresh">刷新
          </el-button>
        </p>
      </el-form-item>
      <el-form-item prop="name" label="职位名称：">
        <el-input v-model="form.name" placeholder="请输入职位名称"></el-input>
      </el-form-item>
      <!-- 在线中的职位：1
          已下线的职位：3
          审核中的职位：0
          未通过的职位：2 -->
      <el-form-item label="职位状态：">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">审核通过</el-radio>
          <el-radio :label="0">待审核</el-radio>
          <el-radio :label="2">审核未通过</el-radio>
          <el-radio :label="3">暂停招聘</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="性别要求：">
        <el-radio-group v-model="form.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <el-form-item label="职位性质：">
        <el-radio-group v-model="form.nature" @change="currentNature">
          <el-radio :label="62">全职</el-radio>
          <el-radio :label="63">兼职</el-radio>
          <el-radio :label="64">实习</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="recruitNum" label="招聘人数：">
        <el-input v-model.number="form.recruitNum" style="width:100px" placeholder="请输入招聘人数"></el-input>&nbsp;&nbsp;人
      </el-form-item>
      <el-form-item label="有效期：">
        <p>
          <span class="label" v-if="form.createTime">发布日期：{{form.createTime.slice(0,16)}}</span>
          <span class="label" v-if="form.expireTime">截止日期：{{form.expireTime.slice(0,16)}}</span>
        </p>
      </el-form-item>

      <el-form-item label="职位类别：" prop="category">
        <el-cascader :options="options.trade" :props="{value:'code', label:'name',children:'childVo'}"
          @change="cascader" :show-all-levels="true" v-model="form.category" placeholder='请输入职位类别'></el-cascader>
      </el-form-item>
      <el-form-item label="工作区域：" prop="workArea">
        <el-cascader :options="options.workArea" :props="{value:'code',label:'name',children:'childVo'}"
          :show-all-levels="false" v-model="form.workArea" placeholder="请选择工作区域"></el-cascader>
      </el-form-item>
      <el-form-item prop="education" label="学历要求：">
        <el-select v-model="form.education" placeholder="学历要求">
          <el-option v-for="(item,index) in options.education" :key="index" :label="item.name" :value="item.val">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="workExp" label="工作经验：">
        <el-select v-model="form.workExp" placeholder="工作经验">
          <el-option v-for="(item,index) in options.work_exp" :key="index" :label="item.name" :value="item.val">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="薪资待遇：" prop="minWage">
        <el-input v-model.number="form.minWage" style="width:100px" placeholder="薪资待遇"></el-input>-
        <el-input v-model.number="form.maxWage" style="width:100px" placeholder="薪资待遇"></el-input>&nbsp;
        <!-- 兼职的情况下 -->
        <el-select v-if="this.form.nature == 63" v-model="form.wageType" label="薪资待遇" style="width:90px">
          <el-option v-for="(item, index) in wageOptions1" :label="item.label" :value="item.value" :key="index">
          </el-option>
        </el-select>
        <!-- 全职或者实习期情况下 -->
        <el-select v-else v-model="form.wageType" label="薪资待遇" style="width:90px">
          <el-option v-for="(item, index) in wageOptions2" :label="item.label" :value="item.value" :key="index">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职位描述：">
        <div style="min-width:500px;">
          <tinymce v-model="form.describe" :height="300" />
        </div>
      </el-form-item>
      <div class="underLine">
        <span>联系</span>方式
      </div>
      <el-form-item prop="contact" label="联系人：">
        <el-input v-model="form.contact" placeholder="请输入联系人姓名"></el-input>&nbsp;
        <el-checkbox label="对外公开" name="type" v-model="form.isShowContact"></el-checkbox>
      </el-form-item>
      <el-form-item prop="phone" label="手机号码：">
        <el-input v-model.trim="form.phone" placeholder="请输入手机号码"></el-input>&nbsp;
        <el-checkbox label="对外公开" name="type" v-model="form.isShowPhone"></el-checkbox>
      </el-form-item>
      <el-form-item prop="tel" label="固定电话：">
        <el-input v-model="form.tel" placeholder="请输入固定电话"></el-input>
      </el-form-item>
      <el-form-item prop="mail" label="联系邮箱：">
        <el-input v-model="form.mail" placeholder="请输入联系邮箱"></el-input>&nbsp;
        <el-checkbox label="对外公开" name="type" v-model="form.isShowMail"></el-checkbox>
      </el-form-item>
      <el-form-item class="btn_box">
        <el-button class="finish_btn" type="primary" @click="onSubmit('form')">保存修改</el-button>
        <el-button class="finish_btn" type="primary" @click="back">返回</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import { getDict, getTrade, getJobInfo, jobUpdate, work_area, refreshJob } from '../../../../api/jobList';
import Tinymce from '../../../common/Tinymce' // 引入富文本
import bus from '../../../common/bus'
export default {
  name: '',
  data () {
    return {
      isShowFile: false,
      form: {
        id: '',
        name: '',
        // 招聘人数
        recruitNum: 0,
        // 职位类别
        category: [],
        trade: [],
        nature: '',
        workPlace: '',
        minWage: '',
        maxWage: '',
        minAge: '',
        maxAge: '',
        // 工作区域
        workArea: [],
        // sex: '',
        education: '',
        // 工作经验
        workExp: '',
        // 薪资类型
        wageType: 0,
        // 发布日期
        createTime: '',
        // 截止日期
        expireTime: '',
        hunter_age: '',
        describe: "",
        allure: [],
        contact: '',
        phone: '',
        tel: '',
        mail: '',
        // 接收简历邮箱
        acceptResumeMail: '',
        // 排序
        resumeNo: '',
        isShowContact: false,
        isShowPhone: false,
        // 联系邮箱是否对外公开
        isShowMail: false,
        expireTime: '',
        refreshTime: '',
        // 职位类型：0.企业招聘、1.后台代发
        jobType: '',


      },
      options: {
        trade: [],
        company_type: [],
        // sex: [],
        work_mode: [],
        area: [],
        scale: [],
        education: [],
        work_exp: [],
        // 工作区域
        workArea: [],
      },
      // 兼职的薪资配置
      wageOptions1: [
        {
          value: 0,
          label: '元/月'
        },
        {
          value: 1,
          label: '元/天'
        },
        {
          value: 2,
          label: '元/小时'
        }
      ],
      // 全职或实习的薪资待遇
      wageOptions2: [{ value: 0, label: '元/月' }],
      rules: {
        name: [
          { required: true, message: '请输入职位描述', trigger: 'blur' },
          { max: 20, message: '单位名称不能超过20个字' }
        ],
        nature: [{ required: true, message: '请选择职位类别', trigger: 'change' }],
        industry: [{ required: true, message: '请选择所属产业', trigger: 'change' }],
        trade: [{ required: true, message: '请选择所属行业', trigger: 'change' }],
        // area: [{ required: true, message: '请选择所在地区', trigger: 'change' }],
        workArea: [{ required: true, message: '请选择所在地区', trigger: 'change' }],
        scale: [{ required: true, message: '请选择单位规模', trigger: 'change' }],
        workPlace: [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
          { max: 100, message: '地址不能超过100个字' }
        ],
        describe: [
          { required: true, message: '请输入单位简介', trigger: 'blur' },
          { max: 2000, message: '单位简介不能超过2000个字' }
        ],
        recruitNum: [
          { required: true, message: '不能为空' },
          { type: 'number', message: '必须为数字值' }
        ],
        contact: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { max: 20, message: '姓名不能超过20个字' }
        ],
        job: [
          { required: true, message: '请输入职位', trigger: 'blur' },
          { max: 20, message: '职位不能超过20个字' }
        ],
        mail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/,
            message: '请输入正确的邮箱',
            trigger: 'change'
          },
          { max: 20, message: '邮箱不能超过20个字' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change' }
        ],
        tel: [{ message: '请输入正确的电话号码', trigger: 'change', pattern: /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,6})?$/ }],
      }
    };
  },
  created () {
    this.getJSON()
    let that = this
    if (this.$route.query.id) {
      let code = ['company_nature', 'sex', 'area', 'scale', 'work_mode', 'education', 'work_exp'];
      getDict(code.join(','))
        .then(data => {
          // that.options.sex = data.data.sex
          that.options.work_mode = data.data.work_mode
          that.options.education = data.data.education
          that.options.area = data.data.area
          that.options.work_exp = data.data.work_exp
          that.options.scale = data.data.scale
          return getTrade();
        })
        .then(data => {
          console.log(data, '职位类别数据');
          that.options.trade = data.data
          return getJobInfo(that.$route.query.id);
        })
        .then(data => {
          console.log(data.data, '工作区域')
          that.form = data.data
          // 获取工作区域
          that.form.workArea = JSON.parse(data.data.workArea);
          that.form.describe = decodeURI(data.data.describe)
          if (data.data.companyInfo) {
            let area = data.data.companyInfo.area
            let scale = data.data.companyInfo.scale
            let companyname = data.data.companyInfo.name
            that.form.area = area
            that.form.scale = scale
            that.form.companyname = companyname
            // 职位类别 回显用到
            that.form.category = JSON.parse(data.data.category)
          }
          this.isShowFile = true;
        });
    }
  },
  beforeRouteUpdate (to, from, next) {
    this.isShowFile = false;
    getJobInfo(to.query.id).then(data => {
      this.form = data.data
      if (data.data.companyInfo) {
        let area = data.data.companyInfo.area
        let scale = data.data.companyInfo.scale
        let companyname = data.data.companyInfo.name
        this.form.area = area
        this.form.scale = scale
        // this.form.describe = data.data.describe.replace(/,/g, "'");
        // this.form.describe = JSON.parse(data.data.describe).join('"');
        this.form.companyname = companyname
        // 职位类别 回显用到
        this.form.category = JSON.parse(data.data.category)
      }
      // that.form.category=data.data.category;
      console.log(data.data, 'data3333');
      this.isShowFile = true;
    })
    next();
  },
  components: {
    Tinymce
  },
  methods: {
    // 初始化拿到数据
    getJSON () {
      // 获取工作区域
      work_area().then(res => {
        this.options.workArea = res.data;
      })
    },
    // 刷新职位的
    handlerefresh () {
      console.log(this.form, '刷新')
      let file = new FormData();
      file.append('id', this.form.id);
      // 刷新简历
      refreshJob(file).then(data => {
        console.log(data);
        if (data.success) {
          this.$message.success('刷新成功');
        } else {
          this.$message.error(`${data.msg}`);
        }
      });
    },
    back () {
      bus.$emit('closeTag', { fullPath: this.$route.fullPath })
      this.$router.push('/jobList')
    },
    // 选择职业性质
    currentNature (val) {
      if (val !== 63) { // 全职或实习
        this.form.wageType = 0;
      }
    },
    // 修改保存
    onSubmit (form) {
      // let allureStr = []
      // // let allureStr2 = []
      // this.form.allure.map((val)=>{
      //     allureStr.push(val.val)
      // })
      var query = {
        id: this.form.id,
        companyId: this.form.companyId,
        name: this.form.name,
        nature: this.form.nature,
        category: JSON.stringify(this.form.category), // 职位类别
        // 招聘人数
        recruitNum: this.form.recruitNum,
        // 工作区域
        workArea: JSON.stringify(this.form.workArea),
        workPlace: this.form.workPlace,
        // 经度
        lng: this.form.lng,
        // 维度
        lat: this.form.lat,
        // sex: this.form.sex,
        education: this.form.education,
        workExp: this.form.workExp,
        describe: encodeURI(this.form.describe),
        // 职位亮点
        allure: this.form.allure,
        contact: this.form.contact,
        phone: this.form.phone,
        tel: this.form.tel,
        mail: this.form.mail,
        acceptResumeMail: this.form.acceptResumeMail,
        resumeNo: this.form.resumeNo,
        minWage: this.form.minWage,
        maxWage: this.form.maxWage,
        minAge: this.form.minAge,
        maxAge: this.form.maxAge,
        isShowContact: this.form.isShowContact,
        isShowPhone: this.form.isShowPhone,
        isShowMail: this.form.isShowMail,
        wageType: this.form.wageType,
        // 招聘状态
        status: this.form.status
      }

      console.log(form, '传参数')
      this.$refs[form].validate((valid) => {
        if (valid) {
          jobUpdate(query).then((res) => {
            if (res.success) {
              this.$message.success('职位修改成功!')
              bus.$emit('closeTag', { fullPath: this.$route.fullPath })
              this.$router.push('/jobList');
            } else {
              this.$message.error(`${res.msg}`);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    cascader (val) {
      // console.log(val, '练级数据')
    }
  }
};
</script>

<style scoped>
.label {
    display: inline-block;
    /* text-align: right; */
    vertical-align: middle;
    font-size: 14px;
    color: #606266;
    line-height: 32px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}

.el-input {
    width: 300px;
}
.el-textarea,
.el-cascader {
    width: 300px;
}
.el-select {
    width: 300px;
}
.el-form-item.profile /deep/ .el-form-item__content {
    flex: 1;
    margin-top: -10px;
}
.el-form-item.profile /deep/ .el-form-item__error {
    left: 0;
}
/* 联系方式样式 */
.underLine {
    padding-bottom: 5px;
    font-size: 14px;
}
.underLine span {
    border-bottom: 2px solid #1893fc;
}
</style>